<div class="full-width margin-all padding-vertical">
	<h1>Order History</h1>
</div>
<script>
  $(function() {
		var icons = {
				header: "ui-icon-circle-arrow-e",
				activeHeader: "ui-icon-circle-arrow-s"
			};
    $( "#order-history-accordion" ).accordion({ 
    	active: false, 
    	collapsible: true,  
    	heightStyle: "content",
    	icons:icons,
    	 beforeActivate: function( event, ui ) {
/*     		 ui.newHeader.find(".option").show();
    		 ui.oldHeader.find(".option").hide();
    		 console.log("orderId="+ui.newPanel.attr("orderId")); */
    		 
    	 }
   	});
  });
  </script>
  <div id="order-history-accordion">
  <div class="font-14">
  	<span class="margin-right">Order ID: 1234567890</span>
  	<span class="margin-right">|</span>
  	<span class="">Order Date: 4/20/2013</span>
  </div>
  <div orderId="1234567890">
  	<div class="font-14 margin-bottom padding-all-half">
  		<button class="padding-all-half">Cancel this order</button>
  		<button class="padding-all-half">Modify this order</button>
  	</div>
    <ul class="font-14 serif">
    	<li>
    		<span class="title">Order Status:</span>
    		<span class="content"> Pending for approval</span>
    	</li>
    </ul>
  </div>
  <div class="font-14">
  	<span class="margin-right">Order ID: 2345678901</span>
  	<span class="margin-right">|</span>
  	<span class="">Order Date: 4/19/2013</span>
  </div>
  <div orderId="2345678901">
    <ul class="font-14 serif">
    	<li>
    		<span class="title">Order Status:</span>
    		<span class="content"> Order approved. Ready for shipment</span>
    	</li>
    </ul>
  </div>
  <div class="font-14">
  	<span class="margin-right">Order ID: 3456789012</span>
  	<span class="margin-right">|</span>
  	<span class="">Order Date: 4/18/2013</span>
  </div>
  <div orderId="3456789012">
    <ul class="font-14 serif">
    	<li>
    		<span class="title">Order Status:</span>
    		<span class="content"> In transition</span>
    	</li>
    	<li>
    		<span class="title">Estimated Delivery Time:</span>
    		<span class="content">4/20/2013 5:40 pm</span>
    	</li>
    </ul>
  </div>
  <div class="font-14">
  	<span class="margin-right">Order ID: 4567890123</span>
  	<span class="margin-right">|</span>
  	<span class="">Order Date: 4/17/2013</span>
  </div>
  <div orderId="4567890123">
    <ul class="font-14 serif">
    	<li>
    		<span class="title">Order Status:</span>
    		<span class="content"> Delivered</span>
    	</li>
    	<li>
    		<span class="title">Delivered at:</span>
    		<span class="content">4/19/2013 5:30 pm</span>
    	</li>
    </ul>
  </div>
</div>